import React from 'react'
import './index.less'
import http from 'libs/http'
import StudentHeader from '../../components/StudentHeader'
import { Footer } from 'components'

export default class extends React.Component {
  state = {
    htmlStr: '',
    hour: null, 
    level: null, 
    name: '',
  }

  componentDidMount() {
    this.getHtmlCode()
    // document.getElementById('footer').style.position = 'none'
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
    // document.getElementById('footer').style.position = 'absolute'
  }

  getHtmlCode = () => {
    const { tableId, type } = this.props.match.params
    http.get('/student/materials/detail', { id: tableId }).then(res => {
      console.log('%c html', 'color: red;', res)
      const { template, hour, level, name } = res.data
      this.setState({
        htmlStr: template, hour, level, name
      })
    })
  }

  render() {
    const { htmlStr, hour, level, name } = this.state
    return (
      <div className="material-container">
        <StudentHeader history={this.props.history} />
        <div className="material-content">
          <div className="banner">
            <h1>{name}</h1>
            <div><span>{level}</span><span>Lesson {hour}</span></div>
          </div>
          <div className="ppt-container">
            <div dangerouslySetInnerHTML = {{ __html: htmlStr }} />
          </div>
        </div>
        <Footer customClass="material-footer" />
      </div>
    )
  }
}